<?php echo CHtml::openTag($tagName, $htmlOptions)?>
	<div class='slideable-image-mask' style='width:<?php echo $width?>;height:<?php echo $height?>'>
		<div class='slideable-image-wrapper'>
			<?php foreach($items as $item):?>
				<a href='<?php echo $item['link']?>' target='<?php echo $item['target']?>' title='<?php echo $item['title']?>'>
					<img width=<?php echo $width;?> height=<?php echo $height?> src='<?php echo $item['src']?>' class='slideable-image'/>
				</a>
			<?php endforeach;?>
		</div>
	</div>
	<div class='slideable-title-wrapper' style='width:<?php echo $width?>'></div>
		<p class='slideable-title'></p>
	<div class='slideable-btn-wrapper'>
		<ul class='slideable-btn-items'>
			<?php foreach($items as $k=>$item):?>
				<li class='slideable-btn'><?php echo $k+1?></li>
			<?php endforeach;?>
		</ul>
	</div>
<?php echo CHtml::closeTag($tagName)?>
<script>
	$().ready(function() {
		$items = $('.slideable-wrapper li');
		obj = $.scrollerable({
			wrapper: '.slideable-image-mask .slideable-image-wrapper',
			items: '.slideable-image-mask .slideable-image-wrapper a',
			direction: '<?php echo $direction?>',
			beforeScroll: function(index, item) {
				$($items).removeClass('hover');
				$($items[index]).addClass('hover');
				$('.slideable-title').html(item.title);
			}
		});
		$items.mouseover(function() {
			index = parseInt(this.innerHTML)-1;
			obj.go(index);
		});
		$('.slideable-wrapper').mousemove(function() {
			obj.stop();
		}).mouseout(function() {
			obj.play();
		});
	})
</script>		